<template>
  <div class="home">
    <el-container>
      <el-header height="80px" style="background-color: white">
        <div style="width: 1200px;margin: 0 auto">
          <el-row :gutter="20">
            <el-col :span="6">
              <a href="javascript:void(0)" @click="home()">
                <img src="/imgs/icon.png" width="200">
              </a>
            </el-col>
            <el-col :span="10">
              <el-menu mode="horizontal" @select="handleSelect" active-text-color="orange">
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">食谱</el-menu-item>
                <el-menu-item index="5">视频</el-menu-item>
                <el-menu-item index="8">资讯</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6">
              <el-input style="position:relative;top:20px"
                        v-model="wd"
                        placeholder="请输入搜索的关键字">
                <el-button slot="append" @click="search()"
                           icon="el-icon-search"></el-button>
              </el-input>

            </el-col>
            <el-col :span="2">
              <el-popover v-if="user==null"
                  placement="top-start" title="欢迎来到烘焙坊"
                  width="200" trigger="hover">
                <i style="font-size: 30px;position: relative;top: 20px"
                    slot="reference" class="el-icon-user"></i>
                <el-button type="info" @click="reg()">注册</el-button>
                <el-button type="warning" @click="login()">登录</el-button>
              </el-popover>
              <el-popover v-else
                          placement="top-start" title="欢迎来到烘焙坊"
                          width="200" trigger="hover">
                <i style="font-size: 30px;position: relative;top: 20px"
                   slot="reference" class="el-icon-user"></i>
                <div style="text-align: center">
                  <el-avatar :src="'http://localhost:8080'+user.imgUrl"></el-avatar><br>
                  <a href="javascript:void(0)" @click="personal()">个人中心</a>
                  <a href="javascript:void(0)" @click="logout()">退出登录</a><br>
                  <a v-if="user.isAdmin==1" @click="admin()">后台管理页面</a>

                </div>
              </el-popover>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer style="background-color:black;height:280px;padding: 50px 0">
        <div style="width: 1200px;margin: 0 auto;
        text-align: center;color: #666">
          <el-row>
            <el-col :span="8">
              <img src="/imgs/icon.png">
              <p>教程灵感就看烘焙坊</p>
              <p>烘焙行业网络社区平台</p>
              <p>全国百城上千个职位等你来</p>
            </el-col>
            <el-col :span="8">
              <el-row id="footer_center">
                <el-col :span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p>
                  <p>烘焙食谱</p>
                  <p>分类信息</p>
                  <p>求职招聘</p>
                  <p>社区交流</p>
                </el-col>
                <el-col :span="8">
                  <h3>服务与支持</h3>
                  <p>联系我们</p>
                  <p>广告投放</p>
                  <p>用户协议</p>
                  <p>友情链接</p>
                  <p>在线反馈</p>
                  <p>我发投稿</p>
                </el-col>
                <el-col :span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p>
                  <p>手机版</p>
                  <p>小黑屋</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <p style="font-size: 60px;margin: 0">
                <span style="color: orange">烘焙</span>坊
              </p>
              <p>烘焙行业社区平台</p>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>

  </div>

</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      user:localStorage.user?JSON.parse(localStorage.user):null,
      wd:''
    }
  },
  methods: {
    handleSelect(key,keyPath){
      // key=index   食谱1  视频5 资讯8
      if (key==0){
        this.$router.push('/index');
      }else{//点击的是食谱/视频/资讯
        this.$router.push('/list?type='+key);
      }
    },
    home(){
      this.$router.push('/index')
    },
    personal(){
      this.$router.push('/personal/index')
    },
    logout(){
      if (confirm("您确认退出登录吗?")){
        localStorage.clear();
        location.href='/';  //返回首页
      }
    },
    admin(){
      this.$router.push('/admin')
    },
    search(){
      // if (this.$route.path!='/list'){
      //   //从A push到 B  点击后退可以回到A
      //   this.$router.push('/list');
      // }
      //从A replace到B  点击后退回不到A      A push 到B replace 到C
          this.$router.replace('/list?wd='+this.wd);
    },
    reg() {
      // location.href="/reg";  导致页面刷新 浪费资源
      if (this.$route.path!='/reg'){
        this.$router.push('/reg');//脚手架开发中使用这种跳转方式
      }

    },
    login() {
      if (this.$route.path!='/login'){
        this.$router.push('/login');
      }

    },
  },



}
</script>

<style>
 #footer_center p{margin: 0}
 #footer_center h3{color: white}
</style>
